<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Management</title>
</head>
<body>
<h1>Contact Management</h1>

<!-- Create Contact Form -->
<h2>Create Contact</h2>
<form id="create-form">
    <label for="name">Name:</label>
    <input type="text" id="name" required><br>
    <label for="age">Age:</label>
    <input type="number" id="age" required><br>
    <label for="gender">Gender:</label>
    <input type="text" id="gender" required><br>
    <label for="address">Address:</label>
    <input type="text" id="address" required><br>
    <label for="mobile">Mobile:</label>
    <input type="text" id="mobile" required><br>
    <button type="button" onclick="createContact()">Create Contact</button>
</form>

<!-- Update Contact Form -->
<h2>Update Contact</h2>
<form id="update-form">
    <label for="update-id">Contact ID:</label>
    <input type="number" id="update-id" required><br>
    <label for="update-name">Name:</label>
    <input type="text" id="update-name" required><br>
    <label for="update-age">Age:</label>
    <input type="number" id="update-age" required><br>
    <label for="update-gender">Gender:</label>
    <input type="text" id="update-gender" required><br>
    <label for="update-address">Address:</label>
    <input type="text" id="update-address" required><br>
    <label for="update-mobile">Mobile:</label>
    <input type="text" id="update-mobile" required><br>
    <button type="button" onclick="updateContact()">Update Contact</button>
</form>

<!-- Delete Contact Form -->
<h2>Delete Contact</h2>
<form id="delete-form">
    <label for="delete-id">Contact ID:</label>
    <input type="number" id="delete-id" required><br>
    <button type="button" onclick="deleteContact()">Delete Contact</button>
</form>

<script>
    function createContact() {
        // Fetch input values
        const name = document.getElementById('name').value;
        const age = parseInt(document.getElementById('age').value);
        const gender = document.getElementById('gender').value;
        const address = document.getElementById('address').value;
        const mobile = document.getElementById('mobile').value;

        // Create request object
        const contactData = {
            ID: 0, // Set appropriate ID if needed
            Name: name,
            Age: age,
            Gender: gender,
            Address: address,
            Mobile: mobile
        };

        // Send POST request to create contact
        fetch('/create', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify([contactData])
        })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
            });
    }

    function updateContact() {
        // Fetch input values
        const id = parseInt(document.getElementById('update-id').value);
        const name = document.getElementById('update-name').value;
        const age = parseInt(document.getElementById('update-age').value);
        const gender = document.getElementById('update-gender').value;
        const address = document.getElementById('update-address').value;
        const mobile = document.getElementById('update-mobile').value;

        // Create request object
        const updateData = {
            ID: id,
            Name: name,
            Age: age,
            Gender: gender,
            Address: address,
            Mobile: mobile
        };

        // Send PUT request to update contact
        fetch('/update', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify([updateData])
        })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
            });
    }

    function deleteContact() {
        // Fetch input value
        const id = parseInt(document.getElementById('delete-id').value);

        // Create request object
        const deleteData = {
            ID: id
        };

        // Send DELETE request to delete contact
        fetch('/delete', {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify([deleteData])
        })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
            });
    }
</script>
</body>
</html>
